<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Sorting Visualizer</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="styles.css" />
</head>
  <header>
    <h1 align="center">Sorting Visualizer</h1>
    <nav>
      <div class="row">
        <div class="col gap-2 d-sm-flex" id="newArray">
          <button
            type="button"
            class="btn btn-outline-success btn-dark newArray"
          >
            New Array
          </button>
        </div>
        <div class="col" id="input">
          <span id="size"
            >Size
            <input
              id="arr_sz"
              type="range"
              min="5"
              max="100"
              step="1"
              value="40" /></span
          ><span id="speed"
            >Speed
            <input
              id="speed_input"
              type="range"
              min="20"
              max="300"
              stepdown="10"
              value="100"
          /></span>
        </div>
        <div class="col gap-2 d-sm-flex justify-content-end">
          <button
            type="button"
            class="btn btn-outline-primary btn-dark bubbleSort"
          >
            Bubble Sort</button
          ><button
            type="button"
            class="btn btn-outline-primary btn-dark selectionSort"
          >
            Selection Sort</button
          ><button
            type="button"
            class="btn btn-outline-primary btn-dark insertionSort"
          >
            Insertion Sort</button
          ><button
            type="button"
            class="btn btn-outline-primary btn-dark quickSort"
          >
            Quick Sort</button
          ><button
            type="button"
            class="btn btn-outline-primary btn-dark mergeSort"
          >
            Merge Sort
          </button>
        </div>
      </div>
    </nav>
  </header>
  <body class="p-3 mb-2 bg-dark text-white">
    <div id="bars" class="flex-container"></div>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
      crossorigin="anonymous"
    ></script>
    <script src="index.js"></script>
  </body>
</html>
